<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(product,index) in products ">
					<td>{{index}}</td>
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
        new Vue({
            el:"#app",
            data:{
                products:[
                	{ id:1,name:"笔记本电脑",price:5000 },
                    { id:2,name:"手机",price:3000 },
                    { id:3,name:"电视",price:4000 }
                ]
            }
        })
	</script>

</html>